<template>
  <div class="fixed-zbest history">
    <header class="header">
      <van-icon
        @click.stop="$emit('hideComponent')"
        class="icon"
        name="arrow-left"
      />
      <div class="midle">阅读历史</div>
      <div class="right">清空</div>
    </header>
    <section class="history-content">
      <div class="history-item">
        <div class="first">
          <van-icon class="icon" name="service-o" />
          <div class="title">大夏王朝</div>
        </div>
        <div class="sec">
          <div class="author">白猫</div>
          <div class="time">2023-2-23</div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.history {
  .header {
    width: 100%;
    height: 0.5rem;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 100;
    background-color: var(--bgc-white);
    border-bottom: 0.01rem solid var(--border-gray);
    box-sizing: border-box;
    padding: 0 0.15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon {
      font-size: 0.25rem;
      margin-right: 0.1rem;
    }
    .midle {
      flex-grow: 1;
      font-size: 0.18rem;
      text-align: center;
    }
    .right {
      font-size: 0.15rem;
    }
  }
  .history-content {
    width: 100%;
    .history-item {
      width: 100%;
      box-sizing: border-box;
      padding: 0.15rem;
      font-size: 0.15rem;
      border-bottom: 0.01rem solid var(--border-gray);
      .first {
        display: flex;
        align-items: center;
        color: var(--text-black);
        .icon {
          font-size: 0.18rem;
          margin-right: 0.05rem;
        }
      }
      .sec {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.05rem;
        font-size: 0.12rem;
        color: var(--text-gray);
      }
    }
  }
}
</style>